<template>
	<view class="container">
		<!-- 搜索框 -->
		<navigator url="/pages/product/search">
			<view class="serach-box">
				<view class="serach-view" >
					<uni-icons type="search" color="#999999" size="18"></uni-icons>
					<Text class="serch-txt">搜索</Text>
				</view>
			</view>
		</navigator>
		<!-- 轮播 -->
		<banner :list="carouselList"></banner>
		<!-- 专题页 -->
		<navigator url="/pages/special/special">
			<view class="special-box">
				<image src="../../static/home/special.png" mode="heightFix"></image>
				<text>【招贤纳士】你有梦想，我有舞台</text>
			</view>
		</navigator>
		<!-- 分类菜单 -->
		<view class="menu-container">
			<menuList :menuList="menuList"></menuList>
		</view>
		<!-- 推荐列表 -->
		<view class="recommend-view" v-for="(item,index) in recommendList">
			<navigator :url="item.url">
				<image :src="item.imgUrl" mode="widthFix"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	import banner from './banner.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import menuList from "../menuList/menuList.vue"
	export default {
		components:{
			banner,
			uniIcons,
			menuList
		},
		data() {
			return {
				titleNViewBackground: '#f4f4f4',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [
					{
						link: "",
						image: "/static/local/slider1.jpg"
					},
					{
						link: "",
						image: "/static/local/slider2.jpg"
					},
					{
						link: "",
						image: "/static/local/slider3.jpg"
					}
				], 
				menuList:[
					{
						imgUrl: "/static/home/smbj.png",
						title: "上门保洁",
						url: "/pages/servetype/serverType?title=上门保洁&id=1"
					},
					{
						imgUrl: "/static/home/jdqx.png",
						title: "家电清洗",
						url: ""
					},
					{
						imgUrl: "/static/home/gdst.png",
						title: "管道疏通",
						url: ""
					},
					{
						imgUrl: "/static/home/jdwx.png",
						title: "家电维修",
						url: ""
					},
					{
						imgUrl: "/static/home/fwwx.png",
						title: "房屋维修",
						url: ""
					},
					{
						imgUrl: "/static/home/zlby.png",
						title: "治理保养",
						url: ""
					},
					{
						imgUrl: "/static/home/byqx.png",
						title: "布艺清洗",
						url: ""
					},
					{
						imgUrl: "/static/home/bcj.png",
						title: "补差价",
						url: ""
					},
				],
				recommendList:[
					{
						imgUrl:"/static/local/slider1.jpg",
						url: "/pages/product/detail?id=1&gid=1"
					},
					{
						imgUrl:"/static/local/slider2.jpg",
						url: ""
					},
					{
						imgUrl:"/static/local/slider3.jpg",
						url: ""
					},
				],
			};
		},
		onLoad(options) {
			//#ifdef H5
			//H5进入，有可能是回调进来的
			if (options.code && options.state) {
				const that = this
				that.logining = true
				that.$api.request('user', 'thirdPartLogin', {
					loginType: 3,
					raw: options.code
				}, failres => {
					that.logining = false
					that.$api.msg(failres.errmsg)
				}).then(res => {
					//登录成功，重定向到指定目标
					that.logining = false
					that.$store.commit('login', res.data)
					uni.setStorageSync('userInfo', res.data)
					//重定向到
					//不能重定向到tabbar页面
					if (options.state === '/pages/cart/cart' || options.state === '/pages/user/user' 
					|| options.state === '/pages/index/index') {
						uni.switchTab({
							url: options.state
						})
					} else {
						uni.redirectTo({
							url: options.state
						})
					}
					
				})
			}
			//#endif
			// this.loadData()
			
			// 进入小程序 判断登录状态
			var that = this
			uni.checkSession({
				success(e) {
					uni.getUserInfo({
						provider: 'weixin',
						success: function(e) {
							console.log(e.userInfo);
							that.$store.commit('updateUserInfo', e.userInfo)
							that.$store.commit('changeLogin',true)
						}
					});
				},
			
			})
		},
		methods: {
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('integral', 'getIndexData', failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					
					uni.hideLoading()
				})
			},
		},
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	
	.serach-box{
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		.serach-view{
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 20rpx;
			border: none;
			border-radius: 20rpx;
			outline: none;
			background: #F0F0F0;
			
			text{
				color: #999999;
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}
	}
	.special-box{
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx;
		
		image{
			height: 24rpx;
			margin-right: 4rpx;
		}
		
		text{
			font-size: 24rpx;
		}
	}
	/* #endif */	
	.recommend-view{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
		
		image{
			display: block;
			width: 100%;
			margin: 10rpx auto;
		}
	}

</style>
